<template>
  <view class="page">
    <!-- 地图 -->
    <view class="map-wrap">
      <!-- #ifdef MP-WEIXIN -->
      <map class="map" :latitude="center.lat" :longitude="center.lng" :scale="14" :markers="markers" :polyline="polyline" show-location></map>
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <view class="map-fallback">地图仅在小程序端展示</view>
      <!-- #endif -->
    </view>

    <!-- 订单卡片 -->
    <view class="order-card">
      <view class="card-hd">
        <image class="thumb" src="https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/weier/che1.png" mode="aspectFill"></image>
        <view class="title-box">
          <view class="title">折叠代步车–ModelF</view>
          <view class="sub">车辆编号：001</view>
        </view>
      </view>

      <view class="info-box">
        <view class="row"><text class="label">名字：</text><text class="val">林某某</text><text class="label label-r">使用时长：</text><text class="val">1小时28分钟</text></view>
        <view class="row"><text class="label">下单时间：</text><text class="val">2025.00.00 00:00</text><text class="label label-r">行驶距离：</text><text class="val">3公里</text></view>
        <view class="fee-row"><text class="fee-label">骑行费</text><text class="fee">0元</text></view>
      </view>
    </view>

    <view class="space"></view>

    <!-- 底部按钮 -->
    <view class="footer" style="display: none;">
      <button class="btn-primary" @tap="returnBike">立即还车</button>
    </view>
  </view>
</template>

<script>
import common_config from '../../static/js/common.js';
var config = common_config.config;
var that;	
var userInfo;
export default {
  name: 'RidePage',
  data() {
    return {
      center: { lat: 24.482, lng: 118.089 }, // 测试中心点（可替换为实时定位）
      markers: [
        { id: 1, latitude: 24.482, longitude: 118.082, width: 24, height: 24, callout: { content: '起', color: '#fff', bgColor: '#2c9cff', display: 'ALWAYS', padding: 6, borderRadius: 8 } },
        { id: 2, latitude: 24.482, longitude: 118.098, width: 24, height: 24, callout: { content: '终', color: '#fff', bgColor: '#ff8a00', display: 'ALWAYS', padding: 6, borderRadius: 8 } }
      ],
      polyline: [
        { points: [{ latitude: 24.482, longitude: 118.082 }, { latitude: 24.484, longitude: 118.089 }, { latitude: 24.482, longitude: 118.098 }], color: '#2c9cff', width: 6, dottedLine: false, arrowLine: true }
      ],
	  rowid:''
    }
  },
  onLoad(options) {
  	that = this;
	that.rowid = options.rowid;
  	that.plusReady();
  },
  methods: {
	  //初始化
	  plusReady(){
	    	userInfo = uni.getStorageSync('userInfo');
	    	if(userInfo){
	    		userInfo = JSON.parse(userInfo);
	    		that.if_login = true;
	  		console.log(userInfo);
	  		that.load_datas();
	    	}else{
	    		that.if_login = false;
	  		uni.redirectTo({
	  			url:'/pages/index/login'
	  		});
	    	}
	    	
	  },
	  load_datas(){
	  	uni.request({
	  	  url: config.request_url+'/v2/open/worksheet/getFilterRows',
	  	  method: 'POST',
	  	  header: {
	  		'Content-Type': 'application/json'
	  	  },
	  	  data: {
	  		"appKey": config.appKey,
	  		"sign": config.sign,
	  		"worksheetId": "ddgl",
	  		"pageSize": 50,
	  		"pageIndex": 1,
	  		"filters": [
	  			{
	  				"controlId": "yonghu",
	  				"dataType": 29,
	  				"spliceType": 1,
	  				"filterType": 24,
	  				"value": userInfo.rowid//用户记录的rowid
	  			}
	  		]
	  	  },
	  	  success: (res) => {
	  		console.log('返回结果:', res.data);
	  		res = res.data;
	  		console.log(res);
	  		if(res.success){
	  			var arr = [];
	  			var datas = res.data.rows;
	  			for(var i = 0;i < datas.length;i++){
	  				var status = '';
	  				var price = '0.00';
	  				var duration = '0小时0分钟';
	  				if(datas[i].ddzt == '使用中'){
	  					status = 'doing';
	  				}
	  				arr.push({
	  					title: 'Modrl F', code: datas[i].ddbh, duration: duration, time: datas[i].ctime, origin: price, discount: 0, pay: price, status: status
	  				});
	  			}
	  			if(arr.length > 0){
	  				that.orders = arr;
	  			}
	  		}else{
	  			 uni.showToast({ title: res.data.msg || '数据获取失败', icon: 'none' });
	  		}
	  	  },
	  	  fail: (err) => {
	  		console.error('请求失败:', err);
	  		uni.showToast({ title: '网络错误', icon: 'none' });
	  	  }
	  	})  
	  },
    returnBike() { uni.showToast({ title: '发起还车流程', icon: 'none' }) }
  }
}
</script>

<style scoped>
.page { background-color: #f4f5f7; min-height: 100vh; }
.map-wrap { height: 420rpx; background-color: #eaeaea; }
.map { width: 100%; height: 100%; }
.map-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #999999; font-size: 26rpx; }
.order-card { background-color: #ffffff; margin: 24rpx; border-radius: 24rpx; padding: 24rpx; box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.04); }
.card-hd { display: flex; align-items: center; }
.thumb { width: 160rpx; height: 160rpx; border-radius: 16rpx; background-color: #f2f3f5; }
.title-box { margin-left: 20rpx; flex: 1; }
.title { font-size: 36rpx; color: #222222; font-weight: 700; }
.sub { margin-top: 8rpx; font-size: 28rpx; color: #666666; }
.info-box { margin-top: 24rpx; background-color: #f3f4f6; border-radius: 20rpx; padding: 20rpx; }
.row { display: flex; align-items: center; margin-bottom: 18rpx; }
.label { font-size: 28rpx; color: #666666; }
.label-r { margin-left: auto; }
.val { font-size: 28rpx; color: #333333; margin-right: 24rpx; }
.fee-row { display: flex; align-items: center; margin-top: 20rpx; }
.fee-label { font-size: 32rpx; color: #333333; font-weight: 700; }
.fee { margin-left: auto; font-size: 34rpx; color: #333333; font-weight: 700; }
.space { height: 140rpx; }
.footer { position: fixed; left: 0; right: 0; bottom: 24rpx; padding: 0 24rpx; }
.btn-primary { height: 100rpx; line-height: 100rpx; border-radius: 50rpx; background-color: #0a6fb5; color: #ffffff; font-size: 34rpx; font-weight: 700; text-align: center; border: none; }
</style>
